console.clear();

(function () {
    // 定义一个数组，用于存放表格内容
    var list = [],
        filteredList = [],     // 用于存放过滤处理后的数据
        maxDisplayLimit = 10,  // 最大显示行数
        textInput = document.querySelector(".text-filter"), // 获取class为test-filter的元素
        displayList = document.querySelector(".list"),
        countMessage = document.querySelector(".countMessage");

    // 初始化数据
    function generateDummyList(itemCount) {
        if (!itemCount) return;
        for (var i = 0; i < itemCount; i++) {
            // 定义一个对象，对象里存放随机数
            var item = {
                name: Math.random().toString(36).substr(2, 10),
                type: Math.random().toString(36).substr(2, 10),
                category: Math.random().toString(36).substr(2, 10)
            }
            // 把对象追加到数组里
            list.push(item);
        }
        // 输出数组长度
        console.log(list.length);
    }

    // 绘制表格
    function generateListItem(item) {
        var li = document.createElement('li'),
            spanName = document.createElement('span'),
            spanType = document.createElement('span'),
            spanCategory = document.createElement('span');
        spanName.classList.add('name');
        spanType.classList.add('type');
        spanCategory.classList.add('category');

        spanName.textContent = item.name;
        spanType.textContent = item.type;
        spanCategory.textContent = item.category;

        li.appendChild(spanName);
        li.appendChild(spanType);
        li.appendChild(spanCategory);
        return li;
    }

    function generateList() {
        var frag = document.createDocumentFragment();
        for (var i = 0; i < filteredList.length; i++) {
            if (i < maxDisplayLimit) {
                var item = filteredList[i],
                    li = generateListItem(item);
                frag.appendChild(li);
            } else {
                // 退出for循环
                break;
            }
        }
        displayList.innerHTML = '';
        displayList.appendChild(frag);
    }

    function textMatch(item) {
        // 定义变量 searchTerm 接收输入框输入的值并把字母转化为小写
        var searchTerm = textInput.value.toLowerCase(),
            itemText = (item.name + item.type + item.category).toLowerCase();
        return itemText.indexOf(searchTerm) !== -1;
    }

    function getFilteredItems() {
        filteredList = list.filter(textMatch);
        generateList();
    }

    // 为输入框添加键盘输入监听
    textInput.addEventListener('keyup', getFilteredItems);

    generateDummyList(100000);
    getFilteredItems();
})();